<!--
// 
// Details.vue
// 客户后台
// 
// Created by 区区电脑 on 2024/08/28.
// 
-->
<template>
    <div class="Details">
        <div class="infos">
            <el-descriptions :column="1">
                <template #title>
                    <span style="color: var(--el-color-primary);font-size: 18px"><b-icon name="bi-box-fill" /> {{ state.info.name }}</span>
                </template>
                <el-descriptions-item label="程序编号" width="300"><span v-if="state.info.code" style="color: var(--el-color-primary);font-size: 16px;font-weight: bold">{{ state.info.code }}</span></el-descriptions-item>
                <el-descriptions-item label="主程序版本"><span v-if="state.currentVersion" style="color: var(--el-color-primary);font-size: 16px;font-weight: bold">V{{ state.currentVersion.versionNum }}</span></el-descriptions-item>
<!--                <el-descriptions-item label="程序描述">{{ state.info.description }}</el-descriptions-item>-->
            </el-descriptions>
        </div>
        <div v-if="state.info.id" class="tab-container">
            <el-tabs v-model="state.tableName">
                <el-tab-pane v-if="$hasPagePermission('ProgramManageProgramVersion')" name="Version">
                    <template #label>
                        <span style="padding: 0 10px">主程序管理</span>
                    </template>
                </el-tab-pane>
<!--                <el-tab-pane v-if="$hasPagePermission('ProgramManageProgramConfig')" name="ProgramConfig" label="配置文件"></el-tab-pane>-->
                <el-tab-pane v-if="$hasPagePermission('ProgramManageProgramUI')" name="ProgramUI" label="前端UI"></el-tab-pane>
                <el-tab-pane v-if="$hasPagePermission('ProgramManageProgramLanguage')" name="ProgramLanguage" label="多语言"></el-tab-pane>
                <el-tab-pane v-if="$hasPagePermission('ProgramManageSqlList')" name="ProgramSql" label="Sql语句"></el-tab-pane>
<!--                <el-tab-pane v-if="$hasPagePermission('ProgramManageProgramChm')" name="ProgramChm" label="帮助文档"></el-tab-pane>-->
            </el-tabs>
            <div class="content">
                <Version v-show="state.tableName === 'Version'" @change="versionChange"/>
                <template v-if="state.currentVersion">
                    <ProgramConfig v-if="state.tableName === 'ProgramConfig'" :version="state.currentVersion"/>
                    <ProgramUI v-if="state.tableName === 'ProgramUI'" :version="state.currentVersion"/>
                    <ProgramLanguage v-if="state.tableName === 'ProgramLanguage'" :version="state.currentVersion"/>
                    <ProgramSql v-if="state.tableName === 'ProgramSql'" :version="state.currentVersion"/>
                    <ProgramChm v-if="state.tableName === 'ProgramChm'" :version="state.currentVersion"/>
                </template>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted, provide} from "vue";
import {useStore} from "vuex";
import {useRouter, useRoute} from "vue-router";
import * as api from "./api.js";
import Version from "./Version/Index.vue"
import ProgramConfig from "./ProgramConfig/Index.vue"
import ProgramUI from "./ProgramUI/Index.vue"
import ProgramLanguage from "./ProgramLanguage/Index.vue"
import ProgramSql from "./SqlList/Index.vue"
import ProgramChm from "./ProgramChm/Index.vue"

const {$hasPagePermission} = window
const props = defineProps({});
const emits = defineEmits();

// 路由
const router = useRouter();
const route = useRoute();
// store
const store = useStore();
const query = computed(() => route.query)
const state = reactive({
    info: {id: query.value.id},
    tableName: "Version",
    tableList: [
        {name: "版本管理", value: "Version"},
    ],
    currentVersion: null
})

// 向子孙组件注入项目详情
provide("detailsInfo", computed(() => state.info))

function versionChange(version) {
    state.currentVersion = version
}

/**
 * 查详情
 * @returns {Promise<void>}
 */
async function loadInfo() {
    const {data} = await api.GetProgramInfo({id: query.value.id});
    state.info = data || {}
}

onMounted(() => {
    loadInfo()
})
</script>

<style lang="scss" scoped>
.Details {
    padding: 10px;

    .infos {
        background: #fff;
        padding: 10px 10px 0 10px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        border-radius: 2px;
        box-sizing: border-box;
        border: 1px solid var(--el-color-primary);
    }
    .tab-container {
        background: #fff;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        border-radius: 2px;
        margin-top: 10px;
        width: 100%;
        .column-tabs {
            width: 160px;
            height: 100%;
            box-sizing: border-box;
            border-right: 1px solid #e0e0e0;
            .column-tab {
                padding: 10px;
                font-size: 16px;
                color: #333;
                cursor: pointer;
                border-left: 2px solid #fff;
            }
            .active-tab {
                background: var(--el-color-primary-light-9);
                border-left: 2px solid var(--el-color-primary);
                color: var(--el-color-primary);
            }
        }
        .content {
            width: 100%;
            padding: 0 10px 10px 10px;
            box-sizing: border-box;
        }
    }

}
</style>